import React, { Component } from 'react';
import { connect } from 'dva';
import { Button, Card, message, Table, Descriptions, Image } from 'antd';
import textVar from '../textVar';

const mapStateToProps = (state: any) => {
  return {
    dataPermission: state.dataPermission,
    loading: state.loading.effects['dataPermission/getFetchPage'],
    permissions: state?.menu?.permissions,
  };
};

class orderManagementDetail extends Component {
  state = {
    info: {},
  };
  componentDidMount() {
    const { record = null } = this.props?.location;
    if (record) {
      this.setState({
        info: {
          ...record,
        },
      });
    }
    console.log(record);
  }
  get payTypeString() {
    const { info } = this.state;
    return textVar.textFn(info?.payType, 'payType');
  }
  get orderSourceString(){
    const { info } = this.state;
    return textVar.textFn(info?.orderSource, 'orderSource');
  }
  render() {
    const { info } = this.state;
    const columns = [
      {
        title: '子订单编号',
        dataIndex: 'orderNo',
      },
      {
        title: '商品名称',
        dataIndex: 'productName',
      },
      {
        title: '商品ID',
        dataIndex: 'productId',
      },
      {
        title: '商品SKUID',
        dataIndex: 'skuId',
      },
      {
        title: '原始支付金额',
        dataIndex: 'oriFee',
      },
      {
        title: '实际支付金额',
        dataIndex: 'payFee',
      },
      {
        title: `购买状态`,
        dataIndex: 'status',
        render: (i: number) => {
          return textVar.textFn(i, 'status');
        },
      },
    ];
    const list = info? [info] : [];
    return (
      <div>
        <Card title="M商城明细">
          <Descriptions bordered column={2}>
            <Descriptions.Item label="备件编号">{info?.attachmentNo}</Descriptions.Item>
            {/* <Descriptions.Item label="品牌编码">{info?.brandId}</Descriptions.Item>
            <Descriptions.Item label="品牌名称">{info?.brandName}</Descriptions.Item> */}
            <Descriptions.Item label="最多还能售后数">{info?.canReturnNum}</Descriptions.Item>
            <Descriptions.Item label="购买数量">{info?.number}</Descriptions.Item>
            <Descriptions.Item label="扩展信息">{info?.extraInfo}</Descriptions.Item>
            <Descriptions.Item label="父订单编号">{info?.parentNo}</Descriptions.Item>
            <Descriptions.Item label="订单来源">{this.orderSourceString}</Descriptions.Item>
            <Descriptions.Item label="订单支付总价">{info?.payFeeSum}</Descriptions.Item>
            <Descriptions.Item label="支付时间">{info?.payTime}</Descriptions.Item>
            <Descriptions.Item label="支付类型">{this.payTypeString}</Descriptions.Item>
          </Descriptions>
          <Card bordered={false} title="M子订单详情列表" style={{ paddingTop: '15px' }}>
            <Table
              dataSource={list}
              rowKey="sid"
              scroll={{ x: true }}
              columns={columns}
              pagination={false}
              // pagination={{
              //   showLessItems: true,
              //   size: 'small',
              //   showSizeChanger: true,
              //   showQuickJumper: true,
              //   pageSizeOptions: ['5', '10', '20', '30', '40', '50'],
              // }}
            />
          </Card>
        </Card>
      </div>
    );
  }
}

export default connect(mapStateToProps)(orderManagementDetail);
